<div class="userInfo">
        <div class="form-group">
            <input type="hidden" name="id" id="id"/>
            <label for="userName">用户名</label>
            <input type="text" class="form-control" id="userName" name="userName">
        </div>
        <div class="form-group">
            <form id="avatarForm" action="/admin/imgUp" method="post" enctype="multipart/form-data">
                <label for="avatar">头像</label>
                <input id="avatar" type="file" class="form-control" name="editormd-image-file"/>
                <input type="submit" class="btn btn-primary" value="上传">
            </form>
            <img src="" alt="" id="userAvatar" class="img-rounded" style="width: 140px; height: 140px;"/>
        </div>
        <div class="form-group">
            <label for="siteTitle">博客名称</label>
            <input type="text" class="form-control" name="siteTitle" id="siteTitle">
        </div>
        <div class="form-group">
            <label for="aboutMe">关于我</label>
            <input type="text" class="form-control" name="aboutMe" id="aboutMe">
        </div>
    <div class="form-group">
        <form id="headBgPicForm" action="/admin/imgUp" method="post" enctype="multipart/form-data">
            <label for="headPicBg">博客头部背景图片</label>
            <input id="headPicBg" type="file" class="form-control" name="editormd-image-file"/>
            <input type="submit" class="btn btn-primary" value="上传">
        </form>
        <img src="" alt="" id="headBgPic" class="img-rounded" style="width: 200px; height: 140px;"/>
        <button id="removeHeadPic" class="btn btn-danger">清除图片</button>
    </div>
        <div class="form-group">
            <button id="userUpdateBtn" class="btn btn-primary form-control">修改</button>
        </div>
</div>

<script>
    function getAhthor(){
        $.get('/author', function(user){
            $('#id').val(user.id);
            $('#avatar').attr('src', user.thumb);
            $('#author').text(user.userName);
            $('#userName').val(user.userName);
            $('#userAvatar').attr('src', user.thumb);
            $('#headBgPic').attr('src', user.headBgPic);
            $('#siteTitle').val(user.siteTitle);
            $('#aboutMe').val(user.aboutMe);
        });
    }
    getAhthor();

    $('#removeHeadPic').on('click', function(){
        $('#headBgPic').attr('src', '');
        $('#headPicBg').val('');
    });

    $('#userUpdateBtn').on('click', function(){
        var userName = $('#userName').val();
        if($.trim(userName) === ''){
            alert('用户名不能为空');
            return;
        }
        userName = vlidField(userName);
        var thumb = $('#userAvatar').attr('src');
        var siteTitle = $('#siteTitle').val();
        var aboutMe = $('#aboutMe').val();
        var headBgPic = $('#headBgPic').attr('src');
        var userInfo = {
            id: parseInt($('#id').val()),
            userName : userName,
            thumb: thumb,
            headBgPic: headBgPic,
            siteTitle: siteTitle,
            aboutMe: aboutMe
        };
        $.ajax({
            type: 'POST',
            url: '/admin/userUpdate',
            data: JSON.stringify(userInfo),
            contentType: 'applcation/json',
            success: function(res){
                if(res.success){
                    getAhthor();
                    alert(res.msg);
                }
            }
        });
        return false;
    });

    $('#avatarForm').ajaxForm({
        success: function(res) {
           if(res.success) {
               $('#userAvatar').attr('src', res.data);
           } else {
               alert(res.msg);
           }
        }
    });
    $('#headBgPicForm').ajaxForm({
        success: function(res) {
            if(res.success) {
                $('#headBgPic').attr('src', res.data);
            } else {
                alert(res.msg);
            }
        }
    });

</script>
